<template>
  <div class="setting-message setting-content">
    <h3>消息设置</h3>
    <div class="content">
      <div class="modal">
        <div class="title">私信设置</div>
        <div class="label-content">
          <p>允许谁给我私信</p>
          <a-radio-group v-model="imRestrict">
            <a-radio value="0">所有人</a-radio>
            <a-radio value="1">我关注的人</a-radio>
            <a-radio value="2">互相关注的人</a-radio>
            <a-radio value="3">关闭（不允许任何人给我私信）</a-radio>
          </a-radio-group>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'MessagePage',
  data () {
    return {
      imRestrict: '0'
    }
  },
  head () {
    return {
      title: this.userInfo.nickname + '消息设置',
      meta: [
        { charset: 'utf-8' },
        {
          hid: 'description',
          name: 'description',
          content: this.userInfo.nickname + '消息设置'
        }
      ]
    }
  },
  created () {},

  methods: {
    async handleUpdateImRestrict (imRestrict) {
      try {
        await this.$axios.post('/gimishare/api/v1/users/update-im-restrict', { imRestrict })
        this.$store.commit('UPDATE_USER_INFO', {
          ...this.userInfo,
          imRestrict
        })
      } catch (error) {
        console.log(error)
      }
    }
  },

  computed: {
    ...mapState({
      userInfo: (state) => state.userInfo
    })
  },

  watch: {
    'userInfo.imRestrict': {
      handler (newVal) {
        this.imRestrict = newVal || '0'
      },
      immediate: true
    },

    imRestrict (newVal) {
      this.handleUpdateImRestrict(newVal)
    }
  }
}
</script>
<style lang="less" scoped>
.setting-message {
  .content {
    padding: 12px 30px;
    .modal {
      .title {
        font-size: 16px;
        color: #000;
        margin-bottom: 12px;
      }
      .label-content {
        p {
          color: #4c4c4c;
          margin-bottom: 12px;
        }
        ::v-deep .ant-radio-wrapper {
          .ant-radio {
            top: -1px;
            & + span {
              font-size: 12px;
              color: #999;
            }
          }
        }
      }
    }
  }
}
</style>
